import React, { useEffect, useState, useContext } from 'react'
import Header from '../../components/header/Header'
import './shop.css'
import { ReducerContext } from "../../App";
import {
  reqcartlist,
  reqcartdelete,
  reqcartedit
} from '../../request/api'
import { filterPrice } from '../../filters/index'
import { Toast } from 'antd-mobile';
export default function Shop() {

  const [list, reqlist] = useState([])

  const [checkedall, reqcheckedall] = useState(false)

  const { state } = useContext(ReducerContext);

  useEffect(() => {
    init()
  }, [])

  const init = () => {
    let shoplist = [...list]
    reqcartlist({ uid: state.info.uid }).then(res => {
      let newlist = res.data.list[1].content ? res.data.list[1].content : []
      newlist.forEach(item => {
        item.checked = shoplist.find((i) => i.id === item.id) ?
          shoplist.find((i) => i.id === item.id).checked : false;
      })
      reqlist(newlist)
    })
  }

  const del = (id) => {
    reqcartdelete({ id: id }).then(res => {
      Toast.info(res.data.msg)
      init()
    })
  }

  const changeone = (id) => {
    let newlist = list
    newlist.forEach(item => {
      if (item.id === id) {
        item.checked = !item.checked
      }
    })
    let newV = checkedall
    newV = newlist.every(item => {
      return item.checked
    })
    reqcheckedall(newV)
    reqlist([...newlist])
  }
  const changeall = (e) => {
    let newV = e.target.checked
    reqcheckedall(newV)
    list.map(item => item.checked = newV)
  }
  const add = (id) => {
    reqcartedit({
      id,
      type: 2
    }).then(res => {
      Toast.info(res.data.msg)
      init()
    })
  }
  const sup = (id) => {
    let shop = list.find(item => item.id === id)
    if (shop.num <= 1) {
      Toast.info('不能在减少了')
      return false;
    }
    reqcartedit({
      id,
      type: 1
    }).then(res => {
      Toast.info(res.data.msg)
      init()
    })
  }

  const zong = () => {
    return list.reduce((val, item) => (item.checked ? (val += item.price * item.num) : val), 0)
  }
  return (
    <div>
      <Header title='购物车'></Header>
      <div className="header-nav">
        <ul>
          <li>全部(20)</li>
          <li>降价(4)</li>
          <li>常卖(2)</li>
          <li>分类</li>
        </ul>
      </div>
      <div className='content'>
        <div className="content-top">
          <div className="content-topl">
            <input type="checkbox" checked={checkedall} onChange={(e) => changeall(e)} />
            <span>小U自营</span>
          </div>
          <div className="content-topr">
            <span>已免运费</span>
            <span></span>
            <span>领券</span>
          </div>
        </div>
        <div className='main'>
          {
            list ?
              list.map(item => (
                <div className="neirong" key={item.id}>
                  <input type="checkbox" checked={item.checked} onChange={() => changeone(item.id)} />
                  <div className="pic">
                    <img src={item.img} alt="" />
                  </div>
                  <div className="zi">
                    <h2>{item.goodsname}</h2>
                    <p className="p1">{item.goodsname}</p>
                    <p className="bi">比加入时降低&yen;100</p>
                    <div className='jia'>
                      <p className="p2">&yen;<span>{item.price}</span> <del>&yen;1099</del></p>
                      <div className="jiaj">
                        <span onClick={() => sup(item.id)}>-</span>
                        <span>{item.num}</span>
                        <span onClick={() => add(item.id)}>+</span>
                      </div>
                    </div>
                  </div>
                  <button onClick={() => del(item.id)}>删除</button>
                </div>
              )) : null
          }
        </div>
        <div className='fff'>
          <div className="footer">
            <form action="#" className="fl">
              <input type="checkbox" checked={checkedall} onChange={(e) => changeall(e)} />
              <h2>全选</h2>
            </form>
            <div className="fl">
              <div className="top">
                <p>
                  合计
                  <span>&yen;{filterPrice(zong())}</span>
                </p>
              </div>
              <div className="x">
                <p>
                  已免运费
                  <span>以优惠&yen;200元</span>
                </p>
              </div>
            </div>
            <div className="fr">
              <div className="q">
                <i>去结算</i>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  )
}
